"use client";

import useBasket from "@/app/hooks/basket.hook";
import useCategories from "@/app/hooks/categories.hook";
import useCategoryItems from "@/app/hooks/items.hooks";
import { useNotifications } from "@/app/hooks/notification.hook";

export default function MenuPage() {
  const { showSuccess } = useNotifications();
  const { categories, selected, setSelected } = useCategories();
  const { items } = useCategoryItems(selected);

  const { addItemToBasket } = useBasket();

  if (items.length < 1 || categories.length < 1)
    return (
      <section style={{ display: "flex", flex: 2, width: "100%" }}>
        <span style={{ margin: "0 auto" }} className="loader"></span>
      </section>
    );

  return (
    <>
      <section className="menu" style={{ flex: 2 }} id="menu">
        <h1 className="heading">
          Наше <span>Меню</span>
        </h1>
        <div className="links">
          {categories.length > 0 ? (
            categories.map((category) => (
              <button
                className={selected === category.id ? "catButtonActive" : ""}
                onClick={() => setSelected(category.id)}
                value="sushi"
              >
                {category.name}
              </button>
            ))
          ) : (
            <h1 className="colored">Категории отсутствуют...</h1>
          )}
        </div>
        <div className="box-container">
          {items.map((item) => (
            <div className="box" id="sushi">
              <img
                src={`${!item.photo.includes("data:image/jpeg;base64,") ? "data:image/jpeg;base64," : ""}${item.photo}`}
                alt=""
              />
              <h3>{item.name}</h3>
              <div className="price">₽{item.price}</div>
              <button
                className="prix"
                onClick={() => {
                  addItemToBasket(item.id);
                  showSuccess(`${item.name} добавлен в корзину`);
                }}
              >
                В корзину
              </button>
            </div>
          ))}
        </div>
        )
      </section>
    </>
  );
}
